<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div>
        <!-- 定义一个颜色选择器 -->
        <input type="color" onchange="watchColorPicker(event)">
        <mark>文本标记（建议用于标记搜索结果中的关键字）自带黄色背景</mark> 
        <hr>
        <form onsubmit="save()">
            <input type='range' value="10" onchange="rangePicker(event)">
            <span id="range">10</span>
            <input type="search">
            <button>提交</button>
        </form>
        <b>你好</b>
        <strong>你好</strong>
        <i>你好</i>
        <em>你好</em>
    </div>
    <script>
    
        let markNode = document.querySelector('mark')
        let range = document.querySelector('#range')
        function watchColorPicker(e) {
            markNode.style.color = e.target.value
        }
        function rangePicker(e) {
            console.log(e.target.value)
            range.innerHTML = e.target.value
        }
        function save(){
            console.log(event.target.input)
            event.preventDefault();
        }

    </script>
</body>
</html>